<template>
  <div class="hebei-map-container">
    <div class="map-header">
      <h2>地图展示</h2>
      <div class="map-controls">
        <el-select v-model="selectedCity" placeholder="选择城市" @change="highlightCity">
          <el-option
            v-for="city in cities"
            :key="city.value"
            :label="city.label"
            :value="city.value"
          />
        </el-select>
        <el-button type="primary" @click="resetMap">重置视图</el-button>
      </div>
    </div>

    <div class="map-wrapper">
      <VChart class="map" :option="chartOption" autoresize @click="handleMapClick" />
    </div>

    <div class="map-info" v-if="selectedArea">
      <h3>{{ selectedArea.name }}信息</h3>
      <div class="info-content">
        <p>人口: {{ selectedArea.population || '暂无数据' }}万人</p>
        <p>GDP: {{ selectedArea.gdp || '暂无数据' }}亿元</p>
        <p>面积: {{ selectedArea.area || '暂无数据' }}平方公里</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { MapChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  VisualMapComponent,
  LegendComponent
} from 'echarts/components';
import VChart from 'vue-echarts';
import * as echarts from 'echarts';
import chinaJson from '@/assets/china.json';

use([
  CanvasRenderer,
  MapChart,
  TitleComponent,
  TooltipComponent,
  VisualMapComponent,
  LegendComponent
]);

// 地图配置和数据
const chartOption = ref({});
const selectedCity = ref('');
const selectedArea = ref(null);

// 河北省城市列表
const cities = ref([
  { value: '石家庄市', label: '石家庄市' },
  { value: '唐山市', label: '唐山市' },
  { value: '秦皇岛市', label: '秦皇岛市' },
  { value: '邯郸市', label: '邯郸市' },
  { value: '邢台市', label: '邢台市' },
  { value: '保定市', label: '保定市' },
  { value: '张家口市', label: '张家口市' },
  { value: '承德市', label: '承德市' },
  { value: '沧州市', label: '沧州市' },
  { value: '廊坊市', label: '廊坊市' },
  { value: '衡水市', label: '衡水市' }
]);

// 完整的河北省城市数据
const areaData = [
  { name: '石家庄市', value: 100, population: 1103, gdp: 5935, area: 14464 },
  { name: '唐山市', value: 80, population: 771, gdp: 7210, area: 13472 },
  { name: '秦皇岛市', value: 60, population: 314, gdp: 1843, area: 7812 },
  { name: '邯郸市', value: 70, population: 954, gdp: 3486, area: 12000 },
  { name: '邢台市', value: 50, population: 711, gdp: 2200, area: 12400 },
  { name: '保定市', value: 90, population: 1119, gdp: 3353, area: 22135 },
  { name: '张家口市', value: 40, population: 442, gdp: 1550, area: 36829 },
  { name: '承德市', value: 30, population: 335, gdp: 1330, area: 39519 },
  { name: '沧州市', value: 60, population: 754, gdp: 3690, area: 14304 },
  { name: '廊坊市', value: 70, population: 492, gdp: 3200, area: 6429 },
  { name: '衡水市', value: 50, population: 448, gdp: 1550, area: 8815 }
];

// 获取城市数据
const getCityData = (cityName) => {
  // 处理可能不带"市"的情况
  const normalizedName = cityName.endsWith('市') ? cityName : cityName + '市';
  return areaData.find(item => item.name === normalizedName) || {
    name: cityName,
    population: '暂无数据',
    gdp: '暂无数据',
    area: '暂无数据'
  };
};

// 初始化地图
const initMap = async () => {
  try {
    // 注册地图数据
    echarts.registerMap('hebei', chinaJson);

    // 配置地图选项
    chartOption.value = {
      title: {
        text: '地图',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 18
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          const data = getCityData(params.name);
          return `
            <div style="font-weight:bold;margin-bottom:5px;">${data.name}</div>
            <div style="margin:2px 0;">人口: ${data.population}万人</div>
            <div style="margin:2px 0;">GDP: ${data.gdp}亿元</div>
            <div style="margin:2px 0;">面积: ${data.area}平方公里</div>
          `;
        },
        backgroundColor: 'rgba(255,255,255,0.9)',
        borderColor: '#ddd',
        borderWidth: 1,
        padding: [10, 15],
        textStyle: {
          color: '#333',
          fontSize: 14
        },
        extraCssText: 'box-shadow: 0 0 10px rgba(0,0,0,0.2);'
      },
      visualMap: {
        min: 0,
        max: 100,
        text: ['高', '低'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695']
        },
        textStyle: {
          color: '#333'
        }
      },
      series: [
        {
          name: '河北省',
          type: 'map',
          map: 'hebei',
          roam: true,
          scaleLimit: {
            min: 1,
            max: 5
          },
          zoom: 1.2,
          label: {
            show: true,
            color: '#333',
            fontSize: 12,
            formatter: (params) => params.name.replace('市', '') // 显示不带"市"的名称
          },
          emphasis: {
            label: {
              show: true,
              color: '#fff',
              fontSize: 14
            },
            itemStyle: {
              areaColor: '#fe9929',
              borderWidth: 2,
              borderColor: '#ff6600'
            }
          },
          selectedMode: 'single',
          data: areaData,
          itemStyle: {
            borderWidth: 1,
            borderColor: '#fff'
          }
        }
      ]
    };
  } catch (error) {
    console.error('加载地图数据失败:', error);
  }
};

// 高亮选中城市
const highlightCity = (cityName) => {
  const data = getCityData(cityName);
  selectedArea.value = data;

  chartOption.value = {
    ...chartOption.value,
    series: [{
      ...chartOption.value.series[0],
      selected: { [data.name]: true }
    }]
  };
};

// 重置地图
const resetMap = () => {
  selectedCity.value = '';
  selectedArea.value = null;
  chartOption.value.series[0].selected = {};
  chartOption.value = { ...chartOption.value };
};

// 处理地图点击事件
const handleMapClick = (params) => {
  if (params.name) {
    selectedCity.value = params.name;
    highlightCity(params.name);
  }
};

onMounted(() => {
  initMap();
});
</script>

<style scoped>
.hebei-map-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
  background-color: #f5f7fa;
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.map-header h2 {
  color: #333;
  margin: 0;
}

.map-controls {
  display: flex;
  gap: 10px;
}

.map-wrapper {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.map {
  width: 100%;
  height: 100%;
}

.map-info {
  margin-top: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.map-info h3 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.info-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.info-content p {
  margin: 5px 0;
  color: #666;
}
</style>
